<template>
  <div>
    <el-row :gutter="29">
      <el-col :span="6" v-for="(item, index) in coupons" :key="index" class="center-coupon-col">
        <div
          class="center-coupon-item-box"
          :class="item.active ? 'center-coupon-item-select' : ''"
          @click="active(index)"
        >
          <div class="center-coupon-item" :class="bg">
            <div class="f18 fw text-ess-1 center-coupon-item-cname" :title="item.cname">{{ item.cname }}</div>
            <div class="center-coupon-item-coupons">
              <span class="f24 fw">￥{{ item.coupons }}</span>
              <span class="ml10 text-ess-1 center-coupon-item-threshold" :title="item.coupons_threshold">
                {{ item.coupons_threshold }}
              </span>
            </div>
            <div>有效期至：{{ item.use_range | formateLimt }}</div>
          </div>
          <div class="center-coupon-item-category">[{{ item.category }}]</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
   props: {
      coupons: [],
      isOver: null //0-未过期 1-已过期
    },
    computed: {
      bg: function() {
        return this.isOver === 1 ? 'center-coupon-over' : ''
      }
    },
    data: function() {
      return {
        isActive: false,
        activeIndex: null,
        curIndex: null
      }
    },
    filters: {
      // 有效期 格式处理
      formateLimt: function(str) {
        str = str.substr(str.indexOf('-') + 1)
        return str.replace(/\./g, '-')
      }
    },
    methods: {
      active: function(index) {
        var _this = this
        // 取消选择
        if (this.curIndex === index) {
          this.curIndex = null
          this.$emit('send', null) // 传到父组件（订单页）
        } else {
          this.curIndex = index
        }
        if (this.isOver === 0) {
          //可用的才有点击选择功能
          this.coupons.forEach(function(item, cindex) {
            item.active = false
            if (cindex === _this.curIndex) {
              _this.$emit('send', cindex) // 传到父组件（订单页）
              item.active = !item.active
            }
          })
        }
      }
    }
}
</script>

<style scoped>
.center-coupon {
  padding: 0 32px;
  background: #fff;
}

.center-coupon-item {
  background: url('//image.zlketang.com/public/news/images/guanwangPic/counpn23.png') no-repeat;
  background-size: cover;
  padding: 22px 12px 18px;
  color: #fff;
}

.center-coupon-col {
  height: 200px;
  margin-bottom: 30px;
}

.center-coupon-item-box {
  margin-bottom: 30px;
  border: 2px solid transparent;
}

.center-coupon-item-select {
  /* background: url('../images/cuoponBorder.png') no-repeat;*/
  position: relative;
  border: 2px solid #ea2c18;
  border-top: none;
}

.center-coupon-item-select::after {
  position: absolute;
  right: 0px;
  bottom: 0px;
  content: '';
  display: block;
  width: 23px;
  height: 23px;
  background: url('//image.zlketang.com/public/news/images/guanwangPic/xuanzhong1.png') center;
  background-size: contain;
}

.center-coupon-over {
  background: url('//image.zlketang.com/public/news/images/guanwangPic/couponsGray.png') no-repeat;
  background-size: cover;
  color: #999;
}

.center-coupon-item-cname {
  margin-bottom: 22px;
}

.center-coupon-item-coupons {
  margin-bottom: 12px;
}

.center-coupon-item-threshold {
  display: inline-block;
  width: 78px;
  line-height: 16px;
}

.center-coupon-item-category {
  padding: 12px 10px;
  border: 2px solid #eeeeee;
  color: #999;
}
</style>